<template>
  <div class="chart-content">
    <div class="title">包材损耗率</div>

    <div class="wrap">
      <CustomChart
        v-if="option.xAxis.data.length"
        class="chart"
        :option="option"
        :enableClickOptions="['xAxis.category', 'seriesZoneSameWidthxAxis']"
        :defaultZoomPosition="{ xAxis: 'currentMonth' }"
        @active-xAxisLabel-change="handleXAxisCategroyChange"
      />
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { getWasteInfo } from "@/api/dashboard/blowIrriagtionSpinLineMonthly";
import { transformEmtyValue } from "@/utils/eam";
export default {
  name: "LeftChart1",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      option: {
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#6AFFF0", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#183845", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#D8AAFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#47335E", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FFC3B5", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#5C3D24", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00FFFD", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0061AF", // 100% 处的颜色
              },
            ],
          },
        ],
        grid: {
          top: 68,
          left: 60,
          bottom: 40,
          right: 30,
        },
        title: {
          text: "",
          left: 20,
          top: 10,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: 500,
            rich: {
              highlight1: {
                color: "#46fbff",
                fontSize: 14,
              },
              highlight2: {
                color: "#ff7d28",
                fontSize: 14,
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
          axisPointer: {
            type: "shadow",
          },
          formatter(params) {
            return `${params[0].name}<br />
              <i class="tooltip-circle" style="background-color:${
                params[0].color.colorStops[0].color
              };"></i>${params[0].seriesName}：${transformEmtyValue(
              params[0].value,
              "-"
            )}‰<br />
              <i class="tooltip-circle" style="background-color:${
                params[1].color.colorStops[0].color
              };"></i>${params[1].seriesName}：${transformEmtyValue(
              params[1].value,
              "-"
            )}‰<br />
              <i class="tooltip-circle" style="background-color:${
                params[2].color.colorStops[0].color
              };"></i>${params[2].seriesName}：${transformEmtyValue(
              params[2].value,
              "-"
            )}‰<br />
              <i class="tooltip-circle" style="background-color:${
                params[3].color.colorStops[0].color
              };"></i>${params[3].seriesName}：${transformEmtyValue(
              params[3].value,
              "-"
            )}‰<br />`;
          },
        },
        legend: {
          data: [
            {
              name: "胚",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "盖",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "纸箱",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "标签",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
          ],
          right: 24,
          top: 30,
          // orient: "vertical",
          textStyle: {
            color: "#ffffff",
          },
          itemHeight: 13,
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            xAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "slider",
            startValue: 0,
            endValue: 5,
            bottom: "3%",
            top: "93%",
            xAxisIndex: 0,
            showDetail: false,
            borderColor: "rgba(167,183,204,0.45)",
            fillerColor: "rgba(167,183,204,0.2)",
            filterMode: "empty",
          },
        ],
        xAxis: {
          data: [],
          triggerEvent: true,
          axisLine: {
            lineStyle: {
              color: "#485073",
            },
          },
          axisLabel: {
            interval: 0,
            color: "rgba(255, 255, 255, 0.6)",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: "",
          nameGap: 26,
          position: "left",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#485073",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.6)",
            formatter(value) {
              return value + "‰";
            },
            fontSize: 11,
            hideOverlap: true,
          },
          axisTick: {
            show: false,
          },
          splitNumber: 5,
        },
        series: [
          {
            name: "胚",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: "10%",
            label: {
              show: true,
              position: "top",
              // formatter: "{c}‰",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
          },
          {
            name: "盖",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: "10%",
            label: {
              show: true,
              position: "top",
              // formatter: "{c}‰",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
          },
          {
            name: "纸箱",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: "10%",
            label: {
              show: true,
              position: "top",
              // formatter: "{c}‰",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
          },
          {
            name: "标签",
            data: [],
            type: "bar",
            barWidth: 16,
            barGap: "10%",
            label: {
              show: true,
              position: "top",
              // formatter: "{c}‰",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.75)",
            },
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.lineItem) {
        return;
      }

      try {
        const { lineId } = this.lineItem.properties;
        const params = { lineId };
        const res = await getWasteInfo(params);

        const {
          yearBiaoqianWasteRatio,
          yearGaiWasteRatio,
          yearPeiWasteRatio,
          yearZhixiangWasteRatio,
          monthWasteInfoVos,
        } = res.data;

        let xAxisData = [];
        let seriesData1 = [];
        let seriesData2 = [];
        let seriesData3 = [];
        let seriesData4 = [];
        monthWasteInfoVos.forEach((ele) => {
          xAxisData.push({
            value: ele.monthStr,
            ...ele,
          });
          seriesData1.push(ele.peiWasteRatio);
          seriesData2.push(ele.gaiWasteRatio);
          seriesData3.push(ele.zhixiangWasteRatio);
          seriesData4.push(ele.biaoqianWasteRatio);
        });

        this.option.title.text = `年累计损耗率：胚 {highlight1|${
          yearPeiWasteRatio || 0
        }‰}，盖 {highlight1|${yearGaiWasteRatio || 0}‰}，纸箱 {highlight1|${
          yearZhixiangWasteRatio || 0
        }‰}，标签 {highlight1|${yearBiaoqianWasteRatio || 0}‰}`;
        this.option.xAxis.data = xAxisData;
        this.option.series[0].data = seriesData1;
        this.option.series[1].data = seriesData2;
        this.option.series[2].data = seriesData3;
        this.option.series[3].data = seriesData4;
      } catch (error) {
        this.option.title.text = `年累计损耗率：胚 {highlight1|0‰}，盖 {highlight1|0‰}，纸箱 {highlight1|0‰}，标签 {highlight1|0‰}`;
        this.option.xAxis.data = [];
        this.option.series[0].data = [];
        this.option.series[1].data = [];
        this.option.series[2].data = [];
        this.option.series[3].data = [];
      }
    },
    handleXAxisCategroyChange(index) {
      const month = this.option.xAxis.data[index].value;
      if (!month) {
        return;
      }
      const { lineName, factoryDeptName } = this.lineItem.properties;
      this.$router.push({
        name: "PackagingLossMonthly",
        params: {
          month: [month, month],
          factoryDeptName,
          lineName,
        },
      });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.chart-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    width: 100%;
    height: 100%;
  }

  .chart {
    flex: 1;
  }
}
</style>
